<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>网络货运平台省运管数据控制台</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-post" id="userForm" method="post">
        <div class="layui-row">
            <div class="layui-col-xs5">
                <div class="layui-form-item" id="payAcc">
                    <label class="layui-form-label">选择账户</label>
                    <div class="layui-input-block">
                        <select id="bankcard" name="bankcardId" lay-filter="bankcard"></select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs5">
                <div class="layui-form-item">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="dateRange" id="dateRange" placeholder="请选择日期范围">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="layui-form-item" style="text-align: center">
                    <a class="layui-btn" lay-submit="" lay-filter="post-btn">查询</a>
                </div>
            </div>
        </div>
    </form>
    <!--表格部分-->
    <table class="layui-hide" id="accTable" lay-filter="accTable"></table>
    <div><a class="layui-btn layui-btn-primary layui-btn-fluid" id="moreBtn">加载更多数据</a></div>
    <!--隐藏模板 -->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="detail">详情</a>
    </script>
</div>

<script src="../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'form'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, table = layui.table, laydate = layui.laydate,util = layui.util;
        let loadEnd = true, overLoadDataList = [], bankcardList,currentPage = 1,outAcctNo,startDate,endDate;
        const nowDate = util.toDateString(new Date(),'yyyy-MM-dd');

        //函数栈
        queryPayBankCard(function (cardList) {
            bankcardList = cardList;
            bindOptions($("#bankcard"), '请选择账户', cardList, (item) => item.id, function (item) {
                const endNo = item['bankAccNo'].substring(item['bankAccNo'].length - 4, item['bankAccNo'].length);
                return item['bankName'] + "(****" + endNo + ')';
            });
            form.render(null, 'form-post');
            refTable();
        });

        //加载table
        function refTable() {
            table.render({
                elem: '#accTable',
                height: 480,
                limit: 9999,
                cols: [[ //标题栏
                    {field: 'acctDate', title: '交易时间',templet:(d)=>d["acctDate"]+" "+d["txTime"]},
                    {field: 'outAcctNo', title: '付款账号'},
                    {field: 'outAcctName', title: '付款人名称'},
                    {field: 'inAcctNo', title: '收款账号'},
                    {field: 'inAcctName', title: '收款人名称'},
                    {field: 'tranAmount', title: '金额'},
                    {field: 'acctBalance', title: '账面余额'},
                    {fixed: 'right', title: '操作', toolbar: '#bar', width: 78}
                ]],
                data: overLoadDataList,
            });
        }

        //上传完毕 提交表单
        form.render(null, 'form-post');
        form.on('submit(post-btn)', function (data) {
            loadEnd = false; currentPage = 1;
            const bankcardId = data.field.bankcardId;
            let filter = bankcardList.filter(item => item.id === bankcardId);
            const bankcard = filter.length > 0 ? filter[0] : null;
            outAcctNo = bankcard['bankAccNo'];
            if (data.field.dateRange == null) return;
            let split = data.field.dateRange.split("至");
            startDate= split[0];
            endDate = split[1];
            loadDataList();
            return false;
        });

        $("#moreBtn").click(function () {
            if (loadEnd) return;
            currentPage++;
            loadDataList()
        });

        const loadDataList = () => {
            if (loadEnd) return;
            admin.req({
                url: "/platform/pab/queryTradeDetails",
                data: {bankAccountNo: outAcctNo, startDate: startDate, endDate: endDate, page: currentPage, limit: 30},
                done: function (res) {
                    if (res.data == null) return;
                    if (res.data['endFlag'] === 'Y') {
                        loadEnd = true;
                        const moreBtnElm = $("#moreBtn");
                        moreBtnElm.text("没有更多数据了");
                        moreBtnElm.attr("disabled", true);
                    }
                    overLoadDataList = overLoadDataList.concat(res.data['itemList'] ?? []);
                    refTable();
                }
            });
        };

        //日期时间选择器
        laydate.render({
            elem: '#dateRange',
            type: 'date',
            range: '至',
            value: nowDate+" 至 "+nowDate,
            min: -360,
            max: util.toDateString(new Date(),'yyyy-MM-dd'),
        });

        //绑定下拉选项
        function bindOptions(jqElm, hint, dataList, valueBack, labelBack) {
            jqElm.empty();
            jqElm.append('<option value="">' + hint + '</option>');
            for (let item of dataList) {
                jqElm.append('<option value="' + valueBack(item) + '">' + labelBack(item) + '</option>');
            }
        }

        //获取付款人（平台）银行卡列表
        function queryPayBankCard(callback) {
            admin.req({
                url: "/platform/bank/getBankCardList",
                data: {"bankShortName": "SPABANK"},
                done: function (res) {
                    callback(res.data);
                }
            });
        }


    });
</script>
</body>
</html>